<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <script>
        // let obj = {
        //     date: '520',
        //     action: '花1314',
        //     mood: 'sad'
        // }

        // let val = obj.action;
        // Object.defineProperty(obj, 'action', {
        //     //添加get 与 
        //     // get 方法，获取这个属性时会触发
        //     get() {
        //         console.log('get 被出发了');
        //         return val;
        //     },
        //     //设置这个属性值会出发
        //     set(newVal) {
        //         if (val != newVal) {
        //             console.log('set 被触发了');
        //             //dom 操作，
        //             val = newVal;
        //         }
        //     }
        // })

        // obj.action
        // obj.action = 200;
        // data 可能会无限的层级---递归
        let data={
            name:'520行动',
            price:200,
            action:{
                action1:'吃饭',
                action2:'看电影',
                action3:{
                    canChoiceObj:{
                        yes:'不写代码',
                        no:'只能new多个'
                    }
                }
            }
        }


        class Observe{
            constructor(obj){
               this.handleObj(obj)
            }

            handleObj(obj){
                if(obj &&  typeof obj =="object"){
                    for(let key in obj){
                    this.addGetAndSet(obj,key,obj[key])
                  }
                }             
            }

            addGetAndSet(obj,attr,val){

                this.handleObj(val);//递归，

                Object.defineProperty(obj,attr,{

                    get(){
                        console.log('Observe 的 get 被触发了',val);
                        return val;
                    },

                    set(newVal){
                       if(newVal!=val){
                           console.log('Observe 的set 被触发了，进行dom操作',newVal,val);
                           val = newVal
                       }
                    }

                })

            }
        }

        new Observe(data);

        data.name;
        data.name='我就喜欢单身咋了！！！！！！！！！！';

        data.action.action1

        data.action.action1='一起写代码';

 




    </script>
</body>

</html>